{extend name="$admin_layout"/}

{block name="style"}
<style>
  .page-footer {
    height: 25px;
    line-height: 25px;
    width: 100%;
    margin: 10px 0;
  }

  .card a {
    color: #fff;
  }
</style>
{/block}

{block name="content"}
<div class="row">
  <div class="col-sm-6 col-lg-3">
    <div class="card bg-primary">
      <div class="card-body clearfix">
        <div class="pull-right">
          <p class="h6 text-white m-t-0">订单总数</p>
          <p class="h3 text-white m-b-0"><a title="订单列表" class="open-tab"
              href="{:url('/admin/shoporder/index')}">{$order_count}</a></p>
        </div>
        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
              class="mdi mdi-wallet-giftcard fa-1-5x"></i></span> </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-lg-3">
    <div class="card bg-danger">
      <div class="card-body clearfix">
        <div class="pull-right">
          <p class="h6 text-white m-t-0">产品总数</p>
          <p class="h3 text-white m-b-0"><a title="产品列表" class="open-tab"
              href="{:url('/admin/shopgoods/index')}">{$goods_count}</a></p>
        </div>
        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
              class="mdi mdi-shopping fa-1-5x"></i></span> </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-lg-3">
    <div class="card bg-success">
      <div class="card-body clearfix">
        <div class="pull-right">
          <p class="h6 text-white m-t-0">会员总数</p>
          <p class="h3 text-white m-b-0"><a title="会员列表" class="open-tab"
              href="{:url('/admin/member/index')}">{$member_count}</a></p>
        </div>
        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
              class="mdi mdi-account fa-1-5x"></i></span> </div>
      </div>
    </div>
  </div>

  <div class="col-sm-6 col-lg-3">
    <div class="card bg-purple">
      <div class="card-body clearfix">
        <div class="pull-right">
          <p class="h6 text-white m-t-0">待处理订单</p>
          <p class="h3 text-white m-b-0"><a title="待处理订单" class="open-tab"
              href="{:url('admin/shoporder/index', ['pay_status' => '1', 'shipping_status'=>0])}">{$order_wait}</a></p>
        </div>
        <div class="pull-left"> <span class="img-avatar img-avatar-48 bg-translucent"><i
              class="mdi mdi-timer-sand fa-1-5x"></i></span> </div>
      </div>
    </div>
  </div>
</div>

<div class="row">

  <div class="col-lg-6">
    <div class="card">
      <div class="card-header">
        <h4>近7天用户注册数</h4>
      </div>
      <div class="card-body">
        <canvas class="js-chartjs-bars"></canvas>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card">
      <div class="card-header">
        <h4>近7天充值金额</h4>
      </div>
      <div class="card-body">
        <canvas class="js-chartjs-lines"></canvas>
      </div>
    </div>
  </div>

</div>


{notempty name="$admin_copyright"}
<footer class="page-footer">
  <span class="copyright">{$admin_copyright|raw}</span>
</footer>
{/notempty}
{/block}

{block name="script"}
<!--图表插件-->
<script type="text/javascript" src="/assets/lightyearadmin/js/Chart.js" charset="utf-8"></script>
<script type="text/javascript">
  $(document).ready(function (e) {
    var $dashChartBarsCnt = jQuery('.js-chartjs-bars')[0].getContext('2d'),
      $dashChartLinesCnt = jQuery('.js-chartjs-lines')[0].getContext('2d');

    var $dashChartBarsData = {
      labels: JSON.parse('{$days|raw}'),
      datasets: [{
        label: '注册用户',
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,0)',
        backgroundColor: 'rgba(51,202,185,0.5)',
        hoverBackgroundColor: "rgba(51,202,185,0.7)",
        hoverBorderColor: "rgba(0,0,0,0)",
        data: JSON.parse('{$new_members|raw}'),
      }]
    };
    var $dashChartLinesData = {
      labels: JSON.parse('{$days|raw}'),
      datasets: [{
        label: '充值金额资金',
        data: JSON.parse('{$recharges|raw}'),
        borderColor: '#358ed7',
        backgroundColor: 'rgba(53, 142, 215, 0.175)',
        borderWidth: 1,
        fill: false,
        lineTension: 0.5
      }]
    };

    new Chart($dashChartBarsCnt, {
      type: 'bar',
      data: $dashChartBarsData
    });

    var myLineChart = new Chart($dashChartLinesCnt, {
      type: 'line',
      data: $dashChartLinesData,
    });

    $('a.open-tab').click(function () {
      top.$.fn.multitabs().create(this, true);
      return false;
    });
  });
</script>
{/block}